<script>
import AppTopNav from '@/components/AppTopNav.vue'
import Footer from '@/components/Footer.vue'

export default {
  components: {
    AppTopNav,
    Footer
  }
};

</script>
<template>
  <div class="LoginBox">
    <!--顶部通栏-->
    <AppTopNav/>
    <!--主体区域 二级路由出口-->
    <div class="content">
      <div class="middlebox">
        <div class="leftbox">
          <img src="../assets/images/school-logo.png" class="xiaohui">
          <div class="line"></div>
          <span>WELCOME</span>
        </div>
        <router-view class="rightbox"></router-view>
      </div>
    </div>
    <Footer></Footer>
  </div>

</template>
<style scoped> .LoginBox {
  background-color: aliceblue;
  height: 100vh;
}

.content {
  height: 90vh;
  margin: 0;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.middlebox {
  background-color: #FFFFFF;
  width: 52%;
  height: 75%;
  display: flex;
  box-shadow: 2px 2px 2px silver;
  min-height:300px;
}

.leftbox {
  width: 35%;
  height: 100%;
  background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 30px;
}
.rightbox{
  width:65%;
}

.xiaohui {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  margin-bottom: 40px;
  margin-top: 60px;
}

.line {
  width: 100%;
  border-bottom: 2px solid snow;
  margin-bottom: 10px;
}
</style>